<template>
    <el-dialog
        v-model="isShow"
        :align-center="true"
        :close-on-click-modal="false"
        :destroy-on-close="true"
        title="编辑接口"
        class="dialog-box"
        @close="onCloseDialog"
    >
        <el-scrollbar max-height="450px">
            <el-form label-width="100" ref="formRef" :model="apiForm">
                <el-form-item prop="name" label="名称">
                    <el-input disabled v-model="apiForm.name"></el-input>
                    <el-text class="form-tip-label" type="warning">接口名称由系统生成，不可更改</el-text>
                </el-form-item>
                <el-form-item prop="label" label="标签">
                    <el-input v-model="apiForm.label" placeholder="请输入接口标签"></el-input>
                </el-form-item>
                <el-form-item prop="path" label="接口地址">
                    <el-input disabled v-model="apiForm.path"></el-input>
                    <el-text class="form-tip-label" type="warning">接口地址由系统生成，不可更改</el-text>
                </el-form-item>

                <el-form-item prop="description" label="描述">
                    <el-input type="textarea" v-model="apiForm.description" placeholder="请输入接口描述"></el-input>
                </el-form-item>

                <el-form-item prop="sort" label="排序">
                    <el-input-number v-model="apiForm.sort" :min="1" />
                </el-form-item>

                <el-form-item label="是否启用">
                    <el-switch v-model="apiForm.isEnabled" />
                </el-form-item>
            </el-form>
        </el-scrollbar>
        <template #footer>
            <el-button @click="onCancel">取消</el-button>
            <el-button @click="onConfirm" type="primary">确认</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ApiForm } from '@/api/system/api/types'
import { FormInstance } from 'element-plus'
const emit = defineEmits<{ onTableAction: [action: TableActionType, params: any] }>()
// 是否显示dialog
const isShow = ref(false)
// 表单实例 Ref
const formRef = ref<FormInstance>()
// 表单初始数据
const initform: Partial<ApiForm> = {
    id: undefined,
    parentId: undefined,
    name: '',
    path: '',
    description: '',
    sort: 0,
    isEnabled: true,
}
// 表单数据
const apiForm = reactive<Partial<ApiForm>>({ ...initform })
// 打开dialog
const onOpenDialog = (action: FormType, row: ApiForm) => {
    if (row.parentId === 0) {
        Object.assign(apiForm, { ...row, parentId: undefined, children: [] })
    } else {
        Object.assign(apiForm, row)
    }
    isShow.value = true
}
// 关闭dialog
const onCloseDialog = () => {
    isShow.value = false
}
// 取消
const onCancel = () => onCloseDialog()
// 完成确认
const onConfirm = async () => {
    emit('onTableAction', 'addOrEditSubmit', apiForm)
}
defineExpose({
    onOpenDialog,
    onCloseDialog,
})
</script>

<style lang="scss" scoped></style>
